<template>
  <view class="commodity-nav">
    <view class="commodity-img">
      <image :src="src" mode=""></image>
    </view>
    <view class="commodity-info">
      <view class="info-writing">
        <view class="info-title">{{title}}</view>
        <view class="info-number">x{{number}}</view>
      </view>
      <view class="info-label">
        <view class="info-name">{{name}}</view>
        <view class="info-price">
          <view class="price-identifying">￥</view> {{price}}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    defineProps
  } from 'vue'
  const props = defineProps({
    src: {
      type: String
    },
    title: {
      type: String
    },
    number: {
      type: Number,
      default: 0
    },
    name: {
      type: String
    },
    price: {
      type: Number,
      default: 0
    }
  })
</script>

<style lang="less">
  .commodity-nav {
    display: flex;
    width: 100%;

    .commodity-img {
      width: 196rpx;
      height: 196rpx;
      border-radius: 24rpx;
      border: 2rpx solid #F2F2F2;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 24rpx;
      }
    }

    .commodity-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-left: 24rpx;
      justify-content: space-between;

      .info-writing {
        display: flex;
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        justify-content: space-between;

        .info-title {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .info-number {
          color: rgba(102, 102, 102, 1);
          margin-left: 32rpx;
        }
      }

      .info-label {
        display: flex;
        justify-content: space-between;

        .info-name {
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .info-price {
          margin-left: 24rpx;
          display: flex;
          align-items: baseline;
          font-size: 40rpx;
          font-weight: 400;
          color: rgba(255, 61, 36, 1);

          .price-identifying {
            font-size: 24rpx;
          }
        }
      }
    }
  }
</style>